<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <title>登录界面</title>
    <script th:src="@{/layui/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/layui/layui.all.js}"></script>
</head>

<body style="">
<form class="layui-form" th:action="@{/sys/userlogin}" style="width: 480px;text-align: center;margin-left: 480px;margin-top: 150px;" method="post" >
    <div style="margin-bottom: 30px;margin-left: 50px">
        <h2 style=" font-weight: 300;font-size: 30px;color: #000;">Imwewen登入界面系统</h2>
       <p style="color:red;" th:text="${error}" th:if="${not #strings.isEmpty(error)}"></p>
        <p style="color:green;" th:text="${success}" th:if="${not #strings.isEmpty(success)}"></p>

    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <label class="layui-icon layui-icon-username" for="user-login-username" style="position: absolute; left: 1px; top: 1px; width: 38px; line-height: 36px; text-align: center; color: #d2d2d2;"></label>
            <input type="text" name="username" id="user-login-username" required  lay-verify="required" th:placeholder="请输入账号" autocomplete="off" class="layui-input"style="padding-left: 38px" >
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <label class="layui-icon layui-icon-password" for="user-login-password" style="position: absolute; left: 1px; top: 1px; width: 38px; line-height: 36px; text-align: center; color: #d2d2d2;"></label>
            <input type="password" name="password" id="user-login-password" required  lay-verify="required" th:placeholder="请输入密码" autocomplete="off" class="layui-input" style="padding-left: 38px">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <div id="slider" ></div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit  style="width: 100px;margin-left: -50px">登录</button>
            <button type="reset" class="layui-btn layui-btn-primary" style="width: 100px"  id="reset">重置</button>
        </div>
    </div>
    <div class="layui-trans layui-form-item ">
        <div class="layui-input-block">
           <a th:href="@{/sys/reg}" style="position: absolute;margin-left: 100px;color: green">还没有账号?立即注册!</a>
        </div>
    </div>
    <div class="layui-trans layui-footer" style="margin-top: 150px;margin-left: 30px">
        <p>© 2020 imwenwen-登入界面系统</p>
    </div>
</form>

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/layui.all.js}"></script>
<script>
    layui.config({
        base: '/dist/sliderVerify/'
    }).extend({
        sliderVerify:'sliderVerify'
    });
    layui.use(['sliderVerify', 'jquery', 'form'], function() {
        var $ = layui.$
            ,form = layui.form,
            sliderVerify = layui.sliderVerify

        $('#reset').on('click',function(){
            slider.reset();
        })

        var slider = sliderVerify.render({
            elem: '#slider',
            onOk: function(){
                layer.msg("滑块验证通过");
            }
        })

    });

</script>
</body>
</html>
